
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加账单</title>
    <!-- 引入layui 样式-->
    <link rel="stylesheet" href="../../static/layer/css/layui.css"/>
    <link rel="stylesheet" href="../../static/css/font-awesome.min.css">
   <style type="text/css">
       .zhangdan-jiben-info {
           width: 100%;
           margin-bottom: 20px;
           padding: 30px 30px;
           box-sizing:border-box;
           background-color: #ffffff;
       }
       .bill-box {
           padding: 15px 0;
           border-bottom: 1px dashed #e6eef6;
       }
       .tab-body {
           background-color: #f4f4f4;
           padding: 20px;
           margin-bottom: 50px;
       }
       .operate-button-group {
           width: 100%;
           position: fixed;
           margin: 0;
           bottom: 0;
           left: 0;
           text-align: center;
           background-color: #ffffff;
           border-top: 1px solid #f4f4f4;
           z-index: 2;
       }
       .blockquote-bottom {
           width: 100%;
           position: fixed;
           margin: 0;
           bottom: 0;
           left: 0;
           text-align: center;
           background-color: #ffffff;
           border-top: 1px solid #f4f4f4;
           z-index: 2;
       }
       .blockquote-bottom-item {
           margin: 15px 0;
       }
       .room-select {
           width: 500px;
       }
       .room-select2 {
           width: 150px;
       }
       .room-select-box-container {
           position: absolute;
           top: 50px;
           display: none;
           padding: 5px 0;
           z-index: 999;
           min-width: 100%;
           border: 1px solid #d2d2d2;
           max-height: 300px;
           overflow-y: auto;
           background-color: #fff;
           border-radius: 2px;
           box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
           box-sizing: border-box;
       }
       .room-select-box-container2 {
           position: absolute;
           top: 50px;
           display: none;
           padding: 5px 0;
           z-index: 999;
           min-width: 100%;
           border: 1px solid #d2d2d2;
           max-height: 300px;
           overflow-y: auto;
           background-color: #fff;
           border-radius: 2px;
           box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
           box-sizing: border-box;
       }
       .displayflex {
           display: flex;
       }
       .box-container {
           width: 120px;
           height: 200px;

           display: inline-block;
           vertical-align: top;
           list-style: none;
           margin: 0;
           padding: 0;
           border-right: 1px solid #e9e9e9;
           overflow: auto;
       }
       .business-box-container {

       }

       .building-box-container {
           display: none;
       }

       .unit-box-container {
           display: none;
       }

       .floor-box-container {
           display: none;
       }

       .room-box-container {
           display: none;
       }
       .room-box {
           margin-left: 30px;
           padding: 15px 0;
           border-bottom: 1px dashed #e6eef6;
       }
       .layui-input-extra-content .layui-form-select dl {
           top: 32px;
       }

       .layui-input-extra-content .layui-input-inline > input {
           height: 25px;
           position: relative;
           z-index: 2;
           padding-left: 5px;
           background-color: transparent;
       }

       .box-container dd {
           cursor: pointer;
           padding: 0 10px;
           line-height: 36px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }

       .box-container dd:hover {
           background-color: #f2f2f2;
       }

       .box-container dd.layui-this {
           background-color: #5FB878;
           color: #fff;
       }
       .choose-room {
           cursor: pointer;
       }
       .label-money {
           position: absolute;
           top: 10px;
           right: 5px;
           font-size: 14px;
           color: #c5d0da;
       }
       .label-card {
           position: absolute;
           top: 10px;
           left: 50px;
           font-size: 14px;
           color: #c5d0da;
       }
       .bill-add>span>span{
           color: #009688;
           font-size: 16px;
           text-decoration: underline #009688;
           vertical-align: middle;
       }
       .bill-add>span:hover{
           opacity: 0.8;
           cursor: pointer;
       }
       .fa-plus-circle {
           vertical-align: middle;
           margin-left: 10px;
           font-size: 25px;
           color: #009688;
       }
       .fa-times-circle {
           vertical-align: middle;
           margin-left: 10px;
           font-size: 25px;
           color: #009688;
       }
       .layui-col-xskssj{width: 12.5%;float: left;}
       .layui-col-xsjssj{width: 12.5%;float: left;}

   </style>
</head>
<body>
<form class="layui-form">
    <div class="layui-tab-content">
        <div class="tab-body">
            <div class="bill-box">
                <div class="zhangdan-jiben-info">
                <div class="quote-housing-info">
                    <div class="quote-title">
                        <i class="fa fa-circle-o" aria-hidden="true"></i>
                        <span>房源信息</span>
                    </div>
                    <div class="room-box-arr clone-box-container">
                        <div class="room-box clone-box" data-index="0">

                            <div class="layui-input-inline room-select">
                                <input type="text" name="room" readonly placeholder="请选择房源项目"
                                       class="layui-input choose-room">
                                <div>
                                    <div id="room-select-box-container" class="room-select-box-container">
                                        <div class="displayflex">
                                            <dl class="box-container business-box-container">
                                            </dl>
                                            <dl class="box-container building-box-container">
                                            </dl>
                                            <dl class="box-container unit-box-container">
                                            </dl>
                                            <dl class="box-container floor-box-container">
                                            </dl>
                                            <dl class="box-container room-box-container">
                                            </dl>
                                        </div>
                                    </div>
                                    <!--<div class="room-select-box-container-btn" onclick="operate.chooseRoom()">确认</div>-->
                                </div>
                            </div>
                            <!--<i class="fa fa-plus-circle" aria-hidden="true"
                               onclick="operate.clone(this, 2)"></i>
                            <i class="fa fa-times-circle" aria-hidden="true"
                               onclick="operate.remove(this, 1);"></i>-->

                          <!--  <label class="layui-form-label">总面积</label> <div class="layui-input-inline room-area">-->
                                <span class="room-area-single">0</span>㎡
                            </div>


                            <!--<span class="room-area"><span class="room-area-single"></span>㎡</span>-->
                        </div>
                    </div>
                </div>
                </div>

                <div class="zhangdan-jiben-info">
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            基本信息
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs4">
                            <label class="layui-form-label">签订人</label>
                            <div class="layui-inline">
                                <input type="text" name="BILL_SIGNER" lay-verify="title" autocomplete="off"
                                       placeholder="请输入签订人" class="layui-input" >
                            </div>
                        </div>
                        <div class="layui-col-xs8">
                            <label class="layui-form-label">账单周期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="START_DATE" class="layui-input" id="start" lay-verify="required" placeholder="开始时间">
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="END_DATE" class="layui-input" id="end" lay-verify="required" placeholder="结束时间">
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="layui-row">
                        <label class="layui-form-label">应收租日期</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="pay_date" name="PAY_DATE" placeholder="应收租日期">
                        </div>
                    </div>
                </div>
                <div class="bill-box">
                    <div class="zhangdan-jiben-info">
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            费用信息
                        </div>
                    </div>
                        <hr>
                       <!-- <div class="layui-row">
                            <div class="layui-col-xs12">
                                <input type="checkbox" name="BILL_NAME" value="租金" lay-skin="primary" title="租金" >
                                <input type="checkbox" name="BILL_NAME" value="押金" lay-skin="primary" title="押金" >
                                <input type="checkbox" name="BILL_NAME" value="水费" lay-skin="primary" title="水费" >
                                <input type="checkbox" name="BILL_NAME" value="电费" lay-skin="primary" title="电费" >
                                <input type="checkbox" name="BILL_NAME" value="燃气费" lay-skin="primary" title="燃气费">
                            </div>
                        </div>-->
                        <!--<div class="layui-row">
                            <div class="layui-col-xs3">
                                <input type="checkbox" name="zujin" value="租金" lay-skin="primary" title="租金">
                            </div>
                            <div class="layui-col-xs3">
                                <div class="layui-input-inline">
                                    <select name="PRICE_TYPE" lay-verify="required" lay-search="">
                                        <option value="1" selected="">收入</option>
                                        <option value="2">支出</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <input type="number" class="layui-input" name="zujinP" id="test5" placeholder="">
                                <span class="label-money">元</span>
                            </div>
                            <div class="layui-col-xs2">
                                <div class="layui-input-inline">
                                    <select name="ALLOT_BILL" lay-verify="required" lay-search="">
                                        <option value="0" selected="">公户</option>
                                        <option value="1">私户</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="layui-row">
                            <div class="layui-col-xs3">
                                <input type="checkbox" name="yajin" value="押金" lay-skin="primary" title="押金">
                            </div>
                            <div class="layui-col-xs3">
                                <div class="layui-input-inline">
                                    <select name="PRICE_TYPE" lay-verify="required" lay-search="">
                                        <option value="1" selected="">收入</option>
                                        <option value="2">支出</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <input type="number" class="layui-input" name="yajinP" id="test5" placeholder="">
                                <span class="label-money">元</span>
                            </div>
                            <div class="layui-col-xs2">
                                <div class="layui-input-inline">
                                    <select name="ALLOT_BILL" lay-verify="required" lay-search="">
                                        <option value="0" selected="">公户</option>
                                        <option value="1">私户</option>
                                    </select>
                                </div>
                            </div>-->
                        <div class="layui-row">
                            <div class="layui-col-xs2">
                                <input type="checkbox" name="zujin" value="租金" lay-filter="addbills" lay-skin="primary" title="租金">
                            </div>
                            <div class="layui-col-xs2">
                                <input type="checkbox" name="yajin" value="押金" lay-filter="addbills" lay-skin="primary" title="押金">
                            </div>
                            <div class="zdlx"></div>
                        </div>
                        <hr>
                        <div class="layui-bill"></div>
                       <!-- <fieldset class="layui-elem-field">
                            <legend>租金</legend>
                            <div class="layui-field-box">
                                <div class="layui-col-xs1">
                                    <div class="layui-input-inline">
                                        <select name="PRICE_TYPE" lay-verify="required" lay-search="">
                                            <option value="1" selected="">收入</option>
                                            <option value="2">支出</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-xskssj">
                                    <input class="layui-input" name="START_DATE" id="START_DATE" placeholder="开始时间" >

                                </div>
                                <div class="layui-col-xsjssj">
                                    <input class="layui-input" name="END_DATE" id="END_DATE" placeholder="结束时间" >

                                </div>
                                <div class="layui-col-xs2">
                                    <div class="layui-input-inline room-select2">
                                        <input type="text" name="room" readonly placeholder="请选择房源项目"
                                               class="layui-input choose-room">
                                        <div>
                                            <div id="room-select-box-container" class="room-select-box-container room-select-box-container2">
                                                <div class="displayflex">
                                                    <dl class="box-container business-box-container">
                                                    </dl>
                                                    <dl class="box-container building-box-container">
                                                    </dl>
                                                    <dl class="box-container unit-box-container">
                                                    </dl>
                                                    <dl class="box-container floor-box-container">
                                                    </dl>
                                                    <dl class="box-container room-box-container">
                                                    </dl>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs1">
                                    <select name="PRICE_TYPE" lay-filter="XFLX" lay-verify="required" lay-search="">
                                        <option value="1" selected="">卡</option>
                                        <option value="2">收入</option>
                                    </select>
                                </div>
                                <div class="xflx">
                                    <div class="layui-col-xs1">
                                        <div class="layui-input-inline">
                                            <input type="number" class="layui-input" name="PARK_CARD" id="PARK_CARD" placeholder="">
                                            <span class="label-money">张</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="bill-add">
                                <span onclick="operate.addBill(this)">
                                        <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                        <span>添加</span>
                                    </span>
                                </div>
                            </div>
                            <div class="layui-form-item contact-person-arr">
                            </div>
                            <br>
                        </fieldset>-->
                        <!--<div class="layui-row">
                            <div class="layui-col-xs3">
                                <input type="checkbox" name="shuifei" value="水费" lay-skin="primary" title="水费">
                            </div>
                            <div class="layui-col-xs3">
                                <div class="layui-input-inline">
                                    <select name="PRICE_TYPE" lay-verify="required" lay-search="">
                                        <option value="1" selected="">收入</option>
                                        <option value="2">支出</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <input type="number" class="layui-input" name="shuifeiP" id="test5" placeholder="">
                                <span class="label-money">元</span>
                            </div>
                        </div>
                        <hr>
                        <div class="layui-row">
                            <div class="layui-col-xs3">
                                <input type="checkbox" name="dianfei" value="电费" lay-skin="primary" title="电费">
                            </div>
                            <div class="layui-col-xs3">
                                <div class="layui-input-inline">
                                    <select name="PRICE_TYPE" lay-verify="required" lay-search="">
                                        <option value="1" selected="">收入</option>
                                        <option value="2">支出</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <input type="number" class="layui-input" name="dianfeiP" id="test5" placeholder="">
                                <span class="label-money">元</span>
                            </div>
                        </div>
                        <hr>
                        <div class="layui-row">
                            <div class="layui-col-xs3">
                                <input type="checkbox" name="ranqifei" value="燃气费" lay-skin="primary" title="燃气费">
                            </div>
                            <div class="layui-col-xs3">
                                <div class="layui-input-inline">
                                    <select name="PRICE_TYPE" lay-verify="required" lay-search="">
                                        <option value="1" selected="">收入</option>
                                        <option value="2">支出</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <input type="number" class="layui-input" name="ranqifeiP" id="test5" placeholder="">
                                <span class="label-money">元</span>
                            </div>
                        </div>-->
                    </div>
                </div>

                <div class="zhangdan-jiben-info">
                    <div class="quote-title">
                        <i class="fa fa-circle-o" aria-hidden="true"></i>
                        <span>附件：</span>
                    </div>
                    <div class="other-info-box">
                        <div class="attachment-info-box">
                            <!--<div class="attachment-administer">
                            <span>
                                <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                                <span id="upload">上传附件</span>
                                <div class="layui-upload-list" id="imgList"></div>
                            </span>
                            </div>-->
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                                <div class="layui-upload-list">
                                    <table class="layui-table">
                                        <thead>
                                        <tr>
                                            <th>缩略图</th>
                                            <th>文件名</th>
                                            <th>大小</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr></thead>
                                        <tbody id="demoList"></tbody>
                                    </table>
                                </div>
                                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bill-box">
                    <div class="zhangdan-jiben-info">
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                备注信息
                            </div>
                        </div>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" name="INFO" class="layui-textarea"></textarea>
                        </div>
                        <hr>
                        <input type="hidden" class="layui-input" name="STATE" value="682177ade393478e8224f9a3aa385a6c">
                        <div class="layui-form-item blockquote-bottom">
                            <div class="blockquote-bottom-item">
                                <button class="layui-btn layui-btn-small" lay-submit="" lay-filter="billadd" >添加</button>
                                <button type="reset" class="layui-btn-small layui-btn-primary cancel">重置</button>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</form>
<script type="text/javascript" src="../../static/layer/layui.js"></script>
<script type="text/javascript" src="../../static/js/common/dateUtils.js"></script>
<script type="text/javascript" src="../../static/js/common/queryUtils.js"></script>
<script type="text/javascript" src="../../static/ujs/contract/bill_add.js"></script>


</body>
</html>